<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>computed小例子</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body>
<div id="app">

<!--        h5的新标签-->
        <section style="width: 500px;margin: 50px auto">
            <div>
                <button type="button" class="btn btn-primary" @click="abs(1)">按价格升序</button>
                <button type="button" class="btn btn-primary" @click="abs(2)">按价格降序</button>
                <button type="button" class="btn btn-primary" @click="abs(3)">默认排序</button>
            </div>
            <div class="input-group" style="margin: 10px 0 10px 0">
                <input type="text"
                       class="form-control"
                       placeholder="请输入关键词"
                       aria-describedby="basic-addon2"
                       v-model="value"
                >
<!--                <span class="input-group-addon" id="basic-addon2">搜索</span>-->
            </div>
                <!-- Table -->
                <table class="table table-striped table-hover">
                    <thead>
<!--                    th默认会加粗-->
                    <tr>
                        <th>序号</th>
                        <th>手机型号</th>
                        <th>手机价格</th>
                    </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in phoneList">
                            <td>{{index}}</td>
                            <td>{{item.title}}</td>
                            <td>{{item.price}}</td>
                        </tr>
                    </tbody>

                </table>
        </section>

</div>
<script src="./vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data(){
            return {
                list:[
                    {title:'华为手机',price:2000},
                    {title:'OPPO手机',price:5000},
                    {title:'VIVO手机',price:3000}
                ],
                value:'',
                type :''
            }
        },
        computed:{
            phoneList(){
                var {list,value} = this
                var filtername;
                filtername = list.filter(function (item) {
                  return item.title.indexOf(value.toUpperCase())!=-1;
                })
                console.log(this.type)
                if (this.type == 1){
                    this.shengxu(filtername);
                }else if (this.type == 2){
                    this.jiangxu(filtername);
                }
                return filtername;
            }
        },
        methods:{
            shengxu(arr){
                arr.sort(function (a,b) {
                    return a.price - b.price;
                })
            },
            jiangxu(arr){
                arr.sort(function (a,b) {
                    return b.price - a.price;
                })
            },
            abs(type){
                this.type = type
                // console.log(this.type = type);
            }
        }
    })
</script>
</body>
</html>